<template>
    <div class="children_content">
        <div class="children_content_flex userInfo_box">
            <div class="left_box">
                <div class="left_info_title left_item">个人信息</div>
                <div class="left_info_avatar left_item">
                    <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" class="avatar" />
                    <div class="left_info_realname">{{ userInfoObj.username }}</div>
                    <div class="left_info_nickname">{{ userInfoObj.nickname }}</div>
                </div>
                <div class="desc_item  left_item">
                    <div class="desc_left">
                        <Icon type="md-person" />
                        <div class="label">真实姓名</div>
                    </div>
                    <div class="desc_right">{{ userInfoObj.username }}</div>
                </div>
                <div class="desc_item  left_item">
                    <div class="desc_left">
                        <Icon type="md-transgender" />
                        <div class="label">用户性别</div>
                    </div>
                    <div class="desc_right">{{ userInfoObj.gender }}</div>
                </div>
                <div class="desc_item  left_item">
                    <div class="desc_left">
                        <Icon type="ios-phone-portrait" />
                        <div class="label">手机号码</div>
                    </div>
                    <div class="desc_right">{{ userInfoObj.phone }}</div>
                </div>
                <div class="desc_item  left_item">
                    <div class="desc_left">
                        <Icon type="md-mail" />
                        <div class="label">用户邮箱</div>
                    </div>
                    <div class="desc_right">{{ userInfoObj.email }}</div>
                </div>
                <div class="desc_item  left_item">
                    <div class="desc_left">
                        <Icon type="md-calendar" />
                        <div class="label">创建时间</div>
                    </div>
                    <div class="desc_right">{{ userInfoObj.createtime }}</div>
                </div>
            </div>
            <div class="right_box">
                <Tabs :value="tabsActive" @on-click="changeTabs">
                    <TabPane label="基本资料" name="info">
                        <Form ref="formEl" :model="formData" :rules="rules"  label-position="top"
                            v-if="tabsActive == 'info'">
                            <FormItem label="真实姓名" prop="username">
                                <Input v-model="formData.username" placeholder="请输入真实姓名" clearable></Input>
                            </FormItem>
                            <FormItem label="昵称">
                                <Input v-model="formData.nickname" placeholder="请输入昵称" clearable></Input>
                            </FormItem>
                            <FormItem label="性别">
                                <RadioGroup v-model="formData.gender">
                                    <Radio label="1">男</Radio>
                                    <Radio label="2">女</Radio>
                                </RadioGroup>
                            </FormItem>
                            <FormItem label="手机号码" prop="phone">
                                <Input v-model="formData.phone" placeholder="请输入手机号码" clearable></Input>
                            </FormItem>
                            <FormItem label="邮箱" prop="email">
                                <Input v-model="formData.email" placeholder="请输入邮箱" clearable></Input>
                            </FormItem>
                        </Form>
                        <div class="save_btn">
                            <Button type="primary">保存</Button>
                        </div>
                    </TabPane>
                    <TabPane label="修改密码" name="password">
                        <Form ref="formEl" :model="passwordForm" :rules="passwordRules" label-position="top"
                            v-if="tabsActive == 'password'">
                            <FormItem label="旧密码" prop="oldPassword">
                                <Input type="password" v-model="passwordForm.oldPassword" placeholder="请输入旧密码" password clearable></Input>
                            </FormItem>
                            <FormItem label="新密码" prop="newPassword">
                                <Input type="password" v-model="passwordForm.newPassword" placeholder="请输入新密码" password clearable></Input>
                            </FormItem>
                            <FormItem label="再次输入新密码" prop="againPassword">
                                <Input type="password" v-model="passwordForm.againPassword" placeholder="请再次输入新密码" password clearable></Input>
                            </FormItem>
                        </Form>
                        <div class="save_btn">
                            <Button type="primary">保存</Button>
                        </div>
                    </TabPane>
                </Tabs>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

// userInfo form ref
const userInfoRef = ref();

// password form ref
const passwordRef = ref();

// tabs
const tabsActive = ref('info');

// 个人信息展示对象
const userInfoObj = ref({
    username: '张三',
    nickname: '小四',
    gender: '男',
    phone: '13800000000',
    email: '163@163.com',
    createtime: '2025-1-1 00:00'
});

// 修改信息对象
const formData = ref({
    username: '张三',
    nickname: '小四',
    gender: '1',
    phone: '13800000000',
    email: '163@163.com',
    createtime: '2025-1-1 00:00'
});

// 密码
const passwordForm = ref({
    oldPassword: '',
    newPassword: '',
    againPassword: ''
});

// 校验密码
const validatePassCheck = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入密码'));
    } else if (value !== passwordForm.value.newPassword) {
        callback(new Error('再次确认不正确'));
    } else {
        callback();
    }
};

// 校验列表
const rules = ref({
    username: [{ required: true, message: '请填写真实姓名', trigger: 'blur' }],
    phone: [{ required: true, message: '请填写手机号码', trigger: 'blur' }],
    email: [{ required: true, message: '请填写邮箱', trigger: 'blur' }],
});

// 校验密码
const passwordRules = ref({
    oldPassword: [{ required: true, message: '请填写旧密码', trigger: 'blur' }],
    newPassword: [{ required: true, message: '请填写新密码', trigger: 'blur' }],
    againPassword: [{ validator: validatePassCheck, trigger: 'blur' }]
});

// 切换tab
const changeTabs = (val) => {
    tabsActive.value = val;
}

</script>

<style scoped lang="scss">
.userInfo_box {
    .left_box {
        height: calc(100vh - 130px);
        .left_item {
            border-bottom: 1px solid #f1f1f1;
            padding: 10px 0px;
        }
        .left_info_title {
            font-size: 18px;
            font-weight: bold;
        }
        .left_info_avatar {
            display: flex;
            flex-direction: column;
            align-items: center;
            .avatar {
                width: 100px;
                height: 100px;
            }
            .left_info_realname {
                margin-top: 10px;
                font-size: 16px;
                font-weight: bold;
            }
            .left_info_nickname {
                color: #808695;
                font-size: 13px;
            }
        }
        .desc_item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .desc_left {
                display: flex;
                align-items: center;
                i {
                    margin-right: 5px;
                }
            }
        }
    }
    .right_box {
        flex: 1;
        background-color: #fff;
        padding: 10px;
        .ivu-tabs {
            height: 100%;
            :deep(.ivu-tabs-content)  {
                height: calc(100% - 38px);
                position: relative;
            }
            .ivu-tabs-tabpane {
                display: flex;
                flex-direction: column;
            }
            .save_btn {
                width: 100%;
                padding: 15px 0px;
                border-top: 1px solid #f1f1f1;
                text-align: right;
                margin-top: auto;
            }
        }
    }
}
</style>
